<template>
  <div class="page" style="display: flex;align-items: center;justify-content: center;">
    <vue-terminal
      :title="'终端'"
      :showHeader="true"
      :greeting="'Welcome to vTerminal.'"
      :task-list="taskList"
      :showInitialCd="false"
      :prompt="'->'"
      :showHelpMessage="true"
      :unknownCommandMessage="{ time: '10:53', type: 'error', label: 'Error', message: 'That command is not recognized!' }"
      :command-list="commandList"
      style="width:50%;margin:0 auto">
    </vue-terminal>
  </div>
</template>

<script>
import VueTerminal from 'vue-terminal'
export default {
  components: { VueTerminal },
  data() {
    return {
      // 具体使用参考：./plugins/task、./plugin/command.js
      taskList: {
        // your tasks
        echo: {
          description: 'Echoes input',
          echo(pushToList, input) { // 这里的方法名称需要和前一层一样
            input = input.split(' ')
            input.splice(0, 1)
            const p = new Promise(resolve => {
              pushToList({ time: '2021-11-25 21:00:24', label: 'Echo', type: 'success', message: input.join(' ') });
              resolve({ type: 'success', label: '名称', message: '描述信息' })
            })
            return p
          }
        }
      },
      commandList: {
        // your commands
        about: {
          description: '关于',
          messages: [
            { message: 'My name is xu xiaofei. I\'m a programmer,<br/> You can visit my personal website at https://islasher.com to learn more about me.' }
          ]
        }
      }
    };
  },
  methods: {
  }
}
</script>

<style lang="scss">
.page {
  width: 100%;
  height: 100%;
  padding: 10px;
}
</style>
